<template>
  <div class="p-3">
    <a-card style="height: 820px">
      <a-form layout="inline">
        <a-form-item label="变更时间">
          <a-range-picker v-model:value="value2" />
        </a-form-item>
        <a-form-item label="收费时间">
          <a-range-picker v-model:value="value2" show-time />
        </a-form-item>
        <a-form-item>
          <a-button type="primary">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary">导出历史</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary">导出信息</a-button>
        </a-form-item>
      </a-form>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        bordered
        :pagination="pagination"
        class="mt-5"
        :row-class-name="
          (_record: any, index: number) =>
            index % 2 === 1 ? 'table-striped' : null
        "
        :scroll="{ x: 3300, y: 550 }"
      >
      </a-table>
    </a-card>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
const plainOptions = ['按小区导出', '按机构导出'];
const dataSource = ref([]);
const columns = [
  {
    title: '日期',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '小区名称',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '大楼名称',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '房间编号',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '住户名称',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '面积名称',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '变更前',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '变更后',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '变化量',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '修改人',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '修改时间',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '审批人',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '操作类型',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '修改原因',
    dataIndex: '',
    key: '',
    align: 'center',
  },
];
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    // onSearch();
  },
});
</script>
<style scoped></style>
